<template>
  <div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="baseList"
      border
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column
        label="编号"
        align="center"
        width="90px"
        type="index"
        :index="indexMethod"
      />
      <el-table-column label="名称" align="center" width="220px">
        <template slot-scope="{row}">
          <span>{{ row.siteName }}</span>
          <el-tag size="mini">{{ row.entName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="省份" align="center">
        <template slot-scope="{row}">
          <span>{{ row.province }}</span>
        </template>
      </el-table-column>
      <el-table-column label="城市" align="center">
        <template slot-scope="{row}">
          <span>{{ row.city }}</span>
        </template>
      </el-table-column>
      <el-table-column label="区、县" align="center">
        <template slot-scope="{row}">
          <span>{{ row.county }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="详细地址" align="center" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          <span>{{ row.location }}</span>
        </template>
      </el-table-column> -->
      <el-table-column
        label="操作"
        align="center"
        :min-width="role === 1 ? '60px' : '160px'"
        class-name="small-padding fixed-width"
      ><template slot-scope="{row}">
        <el-button
          v-if="roleFlag"
          type="warning"
          size="mini"
          @click="HandleGetBaseManager(row)"
        >管理员</el-button>
        <el-button
          v-if="roleFlag"
          type="primary"
          size="mini"
          @click="handleModify(row)"
        >编辑</el-button>
        <el-button
          type="success"
          size="mini"
          @click="routePages({siteId: row.siteId}, '/base/image')"
        >详情</el-button>
        <el-button
          v-if="roleFlag"
          type="danger"
          size="mini"
          @click="deleteSite(row.siteId)"
        >删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <manager-dialog
      :managers="managers"
      :manager-dialog-visible="managerDialogVisible"
      :manager-dialog-title="managerDialogTitle"
      :site="site"
      @close="managerDialogVisible=false"
      @update-manager="updateManager"
      @unbond="unbond"
    />
  </div>
</template>

<script>
import { getBaseManager } from '@/api/base'
import ManagerDialog from './ManagerDialog'
import store from '@/store'

export default {
  name: 'MyTable',
  components: {
    ManagerDialog
  },
  // filters: {
  //   entFilter(index, entList) {
  //     console.log(index, entList)
  //     return '企业：' + entList[index].entName
  //   }
  // },
  props: {
    baseList: {
      type: Array,
      required: true
    },
    listLoading: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      role: Number.parseInt(store.getters.role),
      managers: [],
      tableKey: 0,
      managerDialogVisible: false,
      managerDialogTitle: '',
      site: {}
    }
  },
  computed: {
    roleFlag() {
      return this.role === 0 || this.role === 4
    }
  },
  methods: {
    deleteSite(siteId) {
      this.$confirm('确定删除此基地吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('delete-site', siteId)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    unbond(id) {
      const index = this.managers.findIndex(item => {
        return item.id === id
      })
      this.managers.splice(index, 1)
    },
    HandleGetBaseManager(site) {
      this.managerDialogVisible = true
      this.managerDialogTitle = site.siteName
      this.site = site
      this.getBaseManager()
    },
    getBaseManager() {
      getBaseManager({ siteId: this.site.siteId })
        .then(response => {
          if (response.adminAccount_size > 0) {
            this.managers = response.adminAccount.map(item => { // 处理管理员数据
              item.account[0].id = item.id
              return item.account[0]
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    updateManager() {
      this.getBaseManager()
    },
    handleModify(row) {
      this.$emit('modify', row)
    },
    indexMethod(index) {
      return index + 1
    },
    routePages(query, url) {
      this.$router.push({
        path: url,
        query
      })
    }
  }
}
</script>
